<template>
  <div class="topicList">
    <div class="topicList_box">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" style="padding: 0 .2667rem">
        <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedText" @load="onLoad" :immediate-check="false">
          <div class="topicList_box_item" v-for="item in list" :key="item.id" @click="toTopicDetails(item.id)">
            <div class="topicList_box_item_img">
              <van-image :src="item?.avatar ? item?.avatar : img">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </div>
            <div class="topicList_box_item_content">
              <div class="topicList_box_item_content_title">{{ item.name }}</div>
              <van-text-ellipsis :content="item.content" />
              <div class="topicList_box_item_content_bottom">
                <div class="topicList_box_item_content_bottom_read">阅读：{{ item.readNum }}</div>
                <div class="topicList_box_item_content_bottom_read">参与：{{ item.participateNum }}</div>
              </div>
            </div>
            <!-- <div v-if="showClose" class="close-icon" @click="toDelete(item)"><van-icon name="cross" size="20" color="#999" /></div> -->
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-empty v-if="list.length == 0" image-size="5rem" description="暂无数据" />
  </div>
</template>

<script setup>
import { getTopicList, myFollowTopicList, searchTopic } from '@/api/work';
import img from '@/assets/img/topic.png';
import { getUid } from '@/utils/auth';
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
const myUserId = parseInt(getUid())
const router = useRouter()
const finishedText = ref('没有更多了')
const list = ref([])
const loading = ref(false)      // 是否处于加载状态
const finished = ref(false)     // 是否已加载完毕
const refreshing = ref(false)   // 是否处于下拉刷新状态
const pageNum = ref(1)
const pageSize = ref(10)
const props = defineProps({
  type: {
    type: String,   // 5 说明不需要调接口拿数据
    default: ''
  },
  // isMy: {
  //   type: Boolean,
  //   default: false
  // },
  userId: {
    type: Number,
    default: null
  },
  info: {
    type: String,
    default: ''
  }
})
const showClose = ref(false)
// 监听直接传过来的data数据
watch(() => props.userId, (val, oldVal) => {
  if (val && parseInt(val) === myUserId) {
   showClose.value = true
  }else{
    showClose.value = false
  }
}, { immediate: true, deep: true })
// 监听直接传过来的data数据
// watch(() => props.info, (val, oldVal) => {
//   if (val) {
//     list.value = props.info
//     finished.value = true
//     refreshing.value = false
//     finishedText.value = ''
//   }
// }, { immediate: true, deep: true })
const onLoad = async () => {
  if (props.userId) {
    let params = {
      orderByColumn: 'a.create_time',
      isAsc: 'desc',
      userId:props.userId,
      pageNum: pageNum.value,
      pageSize: pageSize.value
    }
    await myFollowTopicList(params).then(res => {
      console.log(res)
      list.value = list.value.concat(res.rows)
      pageNum.value++

      if (res.total <= list.value.length) {
        finished.value = true
      } else {
        finished.value = false
      }
      if (res.total == 0) {
        finishedText.value = ''
      }
    }).catch(err => {
      console.log(err)
      finished.value = true
    }).finally(() => {
      loading.value = false
      refreshing.value = false
    })
  } else {
    if (props.info) {
     let params = {
        name:props.info,
        orderByColumn:"m.id",
        isAsc:"desc",
        pageNum: pageNum.value,
        pageSize: pageSize.value
      }
      await searchTopic(params).then(res => {
        console.log(res)
        list.value = list.value.concat(res.rows)
        pageNum.value++

        if (res.total <= list.value.length) {
          finished.value = true
        } else {
          finished.value = false
        }
        if (res.total == 0) {
          finishedText.value = ''
        }
      }).catch(err => {
        console.log(err)
        finished.value = true
      }).finally(() => {
        loading.value = false
        refreshing.value = false
      })
    } else {


      let params = {
        orderByColumn: 'm.create_time',
        isAsc: 'desc',
        pageNum: pageNum.value,
        pageSize: pageSize.value
      }
      await getTopicList(params).then(res => {
        console.log(res)
        list.value = list.value.concat(res.rows)
        pageNum.value++

        if (res.total <= list.value.length) {
          finished.value = true
        } else {
          finished.value = false
        }
        if (res.total == 0) {
          finishedText.value = ''
        }
      }).catch(err => {
        console.log(err)
        finished.value = true
      }).finally(() => {
        loading.value = false
        refreshing.value = false
      })
    }
  }
}

const onRefresh = () => {
  pageNum.value = 1
  list.value = []

  finished.value = false
  loading.value = true
  onLoad()
}
defineExpose({
  onRefresh
})
// 跳转到话题详情页
const toTopicDetails = (id) => {
  router.push({
    path: '/topicDetails',
    query: {
      id,
      type:5,
      active:props.userId?1:undefined,
      dynamicKeepAlive: 0
    }
  })
}
</script>

<style lang="scss" scoped>
.topicList {
  width: 100%;

  &_box {
    width: 100%;

    :deep(.van-list) {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    &_item {
      width: 49.2%;
      margin-bottom: .4rem;
      position: relative;
      &_img {
        width: 100%;
        height: 2.6667rem;
        margin-bottom: .2667rem;
        border-radius: .16rem;
        overflow: hidden;

        :deep(.van-image) {
          width: 100%;
          height: 100%;
          background-color: #f8f8f8;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
      .close-icon{
          position: absolute;
          right: .2667rem;
          top: .2667rem;
          z-index: 2;
        }
      &_content {
        padding: 0 .2667rem;

        &_title {
          font-size: .4rem;
          font-weight: 500;
          color: #333;
          margin-bottom: .16rem;
        }

        :deep(.van-text-ellipsis) {
          font-size: .32rem;
          color: #999;
          margin-bottom: .16rem;
        }

        &_bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;

          &_read {
            font-size: .32rem;
            color: #999;
          }
        }
      }
    }
  }

  :deep(.van-list__finished-text) {
    width: 100%;
  }
}
</style>